<template>
	<!-- tableBar我的页面 -->
	<view class="page-wrpapper">
		<!-- 头部用户信息 -->
		<view class="header-user-info">
			<view class="user-avatar">
				<u-avatar
				size="175"
				:src="userInfo && userInfo.avatarUrl ? userInfo.avatarUrl : defaultAvatar"
				mode="square"></u-avatar>
			</view>
			<view class="user-info">
				<view class="user-name">{{ userInfo.nickName }}</view>
				<view class="user-message">
					<view class="followed" @click="handleConcern">
						<text class="iconfont" :class="isConcern ? 'icon-yiguanzhu' : 'icon-weiguanzhu'"></text>
						{{ isConcern ? '已关注' : '关注'}}
					</view>
				</view>
			</view>
		</view>

		<!-- 我的发布 -->
		<view class="mine-release-box">
			<ReleaseList title="TA的发布" :dataList="signList" :totalCount="pagination.totalCount" @scrolltolower="handleLoadMoreSign"></ReleaseList>
		</view>

		<!-- 我的打卡 -->
		<view class="mine-clock-in">
			<ReleaseList title="TA的打卡" titleIcon="icon-daqia" :dataList="clockInList" :totalCount="clockInPagination.totalCount" @scrolltolower="handleLoadMoreClockIn"></ReleaseList>
		</view>

		<!-- 余额和捐赠 -->
		<navigator class="common mine-balance-donation" :url="`/pages/insidePages/taDonation/index?flag=ta&openId=${userInfo.openId}`">
			<view class="left">
				<view class="icon">
					<view class="iconfont donation-icon icon-yue"></view>
				</view>
				<view class="text">TA的捐赠</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
		</navigator>

		<!-- TA的关注 -->
		<navigator class="common mine-attention" :url="`/pages/insidePages/taGoal/index?openId=${userInfo.openId}`">
			<view class="left">
				<view class="icon">
					<view class="iconfont like-icon icon-home_ico_like-"></view>
				</view>
				<view class="text">TA的打卡</view>
			</view>
			<view class="right">
				<u-icon name="arrow-right" size="30"></u-icon>
			</view>
		</navigator>
		
		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { getSignListAll } from '@/api/home.js'
	import { concern, getUserInfoDetail } from '@/api/user.js'
	import ReleaseList from './components/ReleaseList.vue'
	import loginMixin from '@/utils/loginMixin.js'
	
	export default {
		
		mixins: [loginMixin],
		
		components: {
			ReleaseList
		},

		data() {
			return {
				isConcern: '', // 是否已经关注
				defaultAvatar: require('@/static/user/default-avatar.png'),
				signList: [], // 发布列表
				clockInList: [], // 打卡列表
				flag: 'mine', // mine: 我的，attention: 关注的
				userInfo: {},
				showLoginDialog: false,
				pagination: { // 分页参数
					startIndex: 0,
					length: 15,
					totalCount: 0,
				},
				clockInPagination: { // 打卡分页参数
					startIndex: 0,
					length: 15,
					totalCount: 0,
				}
			}
		},

		onLoad(options) {
			const { openId } = options
			this.userInfo = { openId }
			this.init()
		},
		
		watch: {
			'$store.getters.getUserInfo': {
				handler(value) {
					this.showLoginDialog = false
				}
			}
		},
		
		methods: {
			
			init() {
				this.handleGetUserInfoDetail()
				this.handleGetSignListAll()
				this.handleGetClockIn()
			},
			
			async handleGetUserInfoDetail() {
				const data = JSON.stringify({
					visitOpenId: this.user.openId,
					openId: this.userInfo.openId
				})
				const { resultData } = await getUserInfoDetail({ data })
				this.userInfo = Object.assign({}, this.userInfo, resultData.userInfo)
				this.isConcern = resultData.isConcern
			},
			
			// 关注、取消关注
			async handleConcern() {
				// 没有登录
				if (!this.user.hasOwnProperty('openId')) {
					this.showLoginDialog = true
					return
				}
			
				const data = JSON.stringify({
					openId: this.user.openId,
					concernOpenId: this.userInfo.openId
				})
				
				try {
					const res = await concern({
						data
					})
					uni.showToast({
						title: res.resultMsg,
						icon: "none"
					})
					this.handleGetUserInfoDetail()
				} catch (e) {
					// uni.showToast({
					// 	title: e.resultMsg,
					// 	icon: "none"
					// })
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
			
				}
			},
			
			
			handleLoadMoreSign() {
				if (this.pagination.totalCount >= this.signList.length) return
				this.pagination.startIndex += 1
				this.handleGetSignListAll()
			},
			
			handleLoadMoreClockIn() {
				if (this.clockInPagination.totalCount >= this.clockInList.length) return
				this.clockInPagination.startIndex += 1
				this.handleGetClockIn()
			},
			
			// 获取发布数据
			async handleGetSignListAll() {
				if (!this.userInfo.openId) return
				const data = JSON.stringify({
					signStatus: 2, // 1:打卡 2: 发布
					openId: this.userInfo.openId,
					startIndex: this.pagination.startIndex,
					length: this.pagination.length
				})
				try {
					const {
						resultData
					} = await getSignListAll({
						data
					})
					this.signList = [...this.signList, ...resultData.list]
					this.pagination.totalCount = resultData.totalCount
				} catch (e) {
					//TODO handle the exception
				}
			
			},
			
			// 获取打卡
			async handleGetClockIn() {
				if (!this.userInfo.openId) return
				const data = JSON.stringify({
					signStatus: 1, // 1:打卡 2: 发布
					openId: this.userInfo.openId,
					startIndex: this.clockInPagination.startIndex,
					length: this.clockInPagination.length
				})
				try {
					uni.showLoading({
					    title: '加载中'
					})
					const {
						resultData
					} = await getSignListAll({
						data
					})
					this.clockInList = [...this.clockInList, ...resultData.list]
					this.clockInPagination.totalCount = resultData.totalCount
					uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-wrpapper {
		background-color: rgb(245,245,245);
	}
	// 头部用户信息
	.header-user-info {
		width: 100%;
		height: 320rpx;
		display: flex;
		align-items: flex-end;
		margin-bottom: 24rpx;
		padding: 0 0 30rpx 60rpx;
		background-image: url("https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/b1b261c0-e1a2-11e9-a30a-41900ee53442.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-color: #C0C0C0;
		box-sizing: border-box;

		.user-avatar {
			margin-right: 53rpx;
		}

		.user-info {
			.user-name {
				margin-bottom: 12rpx;
				color: #fff;
				font-size: 48rpx;
			}

			.user-message {
				.message-icon {
					width: 30rpx;
				}
				
				.followed {
					border-radius: 8rpx;
					padding: 12rpx 40rpx;
					background-image: linear-gradient(to right, #fe6505, #ffa306);
					font-size: 24rpx;
					
					.iconfont {
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	.mine-release-box {
		margin-bottom: 32rpx;
	}

	.mine-clock-in {
		margin-bottom: 56rpx;
	}

	.common {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 40rpx;

		.left {
			display: flex;
		
			.icon {
				margin-right: 16rpx;
		
				.iconfont {
					font-size: 40rpx;
		
					&.donation-icon {
						color: #319ef0;
					}
		
					&.like-icon {
						color: #e6716a;
					}
				}
			}
		}
	}

	.mine-balance-donation {
		background-image: linear-gradient(to right, #f09964, #d51717);
	}

	.mine-attention {
		background-image: linear-gradient(to right, #63e6d9, #049592);
	}
	
	.popup-wrapper {
		padding: 24rpx;
		text-align: center;
	
		.tip {
			padding: 50rpx 0;
		}
	}
</style>
